<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>



<div id="app">

	 {{dt}}

</div>


<div class="app2">
    <h4 >{{ dt  |  dateFormat2 }}</h4>
    <h1>{{ time | time-filter }}</h1>
</div>







<br>
<script src="vue.js"></script>

<script type="text/javascript">

 // 创建全局的过滤器,进行时间的格式化

/*    Vue.filter('dateFormat',function(dataStr,pattern=""){
        var dt = new Date(dataStr)

        var y = dt.getFullYear()
        var m = dt.getMonth()+1
        var d = dt.getDate()

        if(pattern.toLowerCase() === 'yyyy--mm--dd'){
           return `${y}-${m}-${d}`
        }else{
          var hh = dt.getHours()
          var mm = dt.getMinutes()
          var ss = dt.getSeconds()
          return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
        }

        // return y + '--' + m + '--' + d
    })

*/
    Vue.filter('time-filter', function(dataStr,pattern=""){
      var dt = new Date()

      var nian = dt.getFullYear()
      var yue = dt.getMonth()
      var ri   = dt.getDate()
      var week = dt.getDay()

      // 将星期几的阿拉伯数字转换为中文
      switch (week){
        case(1): week ="一"; break;
        case(2): week ="二"; break;
        case(3): week ="三"; break;
        case(4): week ="四"; break;
        case(5): week ="五"; break;
        case(6): week ="六"; break;
        case(7): week ="日"; break;
      }


      return ` ${nian}年-${yue}月-${ri}日 星期${week} `

    })




//实例的创建
var app = new Vue({
  el: '#app',

  data: {
  	 msg:"hello",
     dt: new Date()
  },

  methods:{
  	
  }

})

//创建另一个实例
var app2 =new Vue({

    el:".app2",

    data:{
      dt:new Date(),
      time:""
    },

    methods:{},
        
    filters:{//私有过滤器，过滤器有两个条件  【 名称 , 回调]
      dateFormat2:function(dateStr, pattern = ""){
        var dt = new Date(dateStr)

        var nian = dt.getFullYear()
        var yue  = dt.getMonth()
        var ri   = dt.getDate()
        var week = dt.getDay()

        // 将星期几的阿拉伯数字转换为中文
        switch (week){
          case(1): week ="一"; break;
          case(2): week ="二"; break;
          case(3): week ="三"; break;
          case(4): week ="四"; break;
          case(5): week ="五"; break;
          case(6): week ="六"; break;
          case(7): week ="日"; break;
        }
        return ` ${nian}年-${yue}月-${ri}日 星期${week} ---私有过滤器`
      },//第一个私有过滤器结束

    }//app2的私有过滤器结束



    




})





</script>

	
</body>
</html>